<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const chartRef = useTemplateRef("chartRef");
let myChart = null;
const initChart = () => {
  myChart = echarts.init(chartRef.value);
  const options = {
    color: ["green", "white", "blue", "yellow", "red"],
    legend: {
      left: "left",
      orient: "vertical",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "70%"],
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        label: {
          show: true,
          // position: "center",
          position: "outside",
        },
      },
    ],
  };

  myChart.setOption(options);
};

function handleResize() {
  myChart.resize();
}
onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart.dispose();
});
</script>

<style scoped></style>
